$grid-size = 24

/* Break-point
--------------------------*/
$--sm = 768px
$--md = 992px
$--lg = 1200px
$--xl = 1920px

$--breakpoints = {
  'xs' : (max-width $--sm - 1)
  'sm' : (min-width $--sm),
  'md' : (min-width $--md),
  'lg' : (min-width $--lg),
  'xl' : (min-width $--xl)
}

.row
    display flex

.col
    flex 1

col($column, $grid-size, $key = '')
    if $key != ''
        .col-{$key}-{$column}
                width ($column / $grid-size) * 100%
    else
        .col-{$column}
                width ($column / $grid-size) * 100%

col-offset($column, $grid-size, $key = '')
    if $key != ''
        .col-offset-{$key}-{$column}
                margin-left ($column / $grid-size) * 100%
    else
        .col-offset-{$column}
                margin-left ($column / $grid-size) * 100%

col-pull($column, $grid-size, $key = '')
    if $key != ''
        .col-pull-{$key}-{$column}
                position relative
                width ($column / $grid-size) * 100%
    else
        .col-pull-{$column}
                position relative
                right ($column / $grid-size) * 100%

col-push($column, $grid-size, $key = '')
    if $key != ''
        .col-push-{$key}-{$column}
                position relative
                left ($column / $grid-size) * 100%
    else
        .col-push-{$column}
                position relative
                left ($column / $grid-size) * 100%

for $column in (1..$grid-size)
    col($column, $grid-size)
    col-offset($column, $grid-size)
    col-pull($column, $grid-size)
    col-push($column, $grid-size)

media($key, $map = $--breakpoints)
    for $column in (1..$grid-size)
        $item = $map[$key]
        @media only screen and ({$item[0]}: $item[1])
            col($column, $grid-size, $key)
            col-offset($column, $grid-size, $key)
            col-pull($column, $grid-size, $key)
            col-push($column, $grid-size, $key)

for $key in keys($--breakpoints)
    media($key)
